<template>
  <div >
    <!-- 电影简介 -->
    <div class="movie-top">
      <div class="movie-banner">
        <div class="movie-img">
          <el-image :src="fileUploadHost + movie.images" :alt="movie.title">
            <div slot="error" class="image-slot">
              <img src="../../assets/styles/images/hotmovie1.png" alt="" style="width: 100%" >
            </div>
          </el-image>
        </div>
        <div class="movie-data">
          <div class="movie-name">
            <h2 class="name" id="moviename">{{movie.title}}</h2>
            <!-- <h2 class="othername" id="englishname">天気の子</h2>-->
            <p class="kind" id="kind">{{selectDictLabel(typeOptions, movie.type)}}</p>
            <p class="kind" id="category">{{ movie.categoryName ? movie.categoryName: '无' }}</p>
            <p class="area" id="adress">{{selectDictLabel(countryOptions, movie.country)}} / {{formatVideoTime(movie.totalVideoLength)}}</p>
            <p class="time" id="time"> {{ parseTime(movie.publishTime, '{y}-{m}-{d}') }}上映</p>
            <template v-for="(item, index) in tagOptions">
              <template v-if="getTagArray(movie.tagId).includes(String(item.tagId))">
              <span
                style="margin: 20px 5px 0 0"
                v-if="item.listClass == 'default' || item.listClass == ''"
                :key="item.tagId"
                :index="index"
                :class="item.cssClass">{{ item.content }}
              </span>
                <el-tag
                  v-else
                  style="margin: 20px 5px 0 0"
                  :key="item.tagId"
                  :index="index"
                  :type="item.listClass === 'primary' ? '' : item.listClass"
                  :class="item.cssClass? item.cssClass: ''">
                  {{ item.content }}
                </el-tag>
              </template>
            </template>


          </div>
          <div class="movie-btn">
           <!-- <a href="#" class="like"><i class="normal"></i> <span>想看</span></a>-->
            <Collect :targetId="movieId" :tableName="tableName" :collectCount="movie.collectionCount"></Collect>
          </div>
          <div class="watching">
            <p class="name">评分</p>
            <el-rate
              v-if="movie.rate"
              v-model="movie.rate"
              disabled
              style="font-size:24px;"
              show-score
              text-color="#ff9900"
              score-template="{value}">
            </el-rate>
            <span style="color: #ffb400;" v-else>暂无评分</span>
            <p class="money mt10"><span class="iconfont">&#xe8c7; </span>点击数</p>
            <p class="num">{{movie.clickCount}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 页面主体 -->
    <div class="container">
      <!-- 左部主题内容 -->
      <div class="main">
        <div class="nav">
          <div class="intro">
            <span>剧集列表</span>
          </div>
          <el-row :gutter="24">
            <el-col :xs="12" :sm="6" :md="4" :lg="3"  style="padding: 5px;margin-right: 10px" v-for="video in videoList" :key="video.videoId" >
              <el-tooltip  :content="video.title" placement="top">
                <el-button type="danger" v-if="video.title && video.title.length < 6" @click="play(video.videoId)"  style="margin-bottom: 20px" plain>{{ video.title | ellipsis(6)}}</el-button>
                <el-button type="danger" v-else @click="play(video.videoId)"  style="margin-bottom: 20px" plain>{{ video.title | ellipsis(6)}}</el-button>
              </el-tooltip>
            </el-col>
          </el-row>
          <p v-if="videoList.length === 0" style="color:#ef4238">  暂时没有播放的视频！请联系管理员进行上传！</p>
        </div>

        <!-- 标签页切换控制 -->
        <el-tabs v-model="activeName">
          <el-tab-pane label="介绍" name="description">
            <el-card class="box-card">
            <div class="referral">
              <div class="intro">
                剧情简介
              </div>
              <span v-html="movie.description">{{movie.description}}</span>
            </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="演职人员" name="actor">
            <!-- 演职人员 -->
            <div class="actor">
              <div class="director">
                <p>导演</p>
                <div class="director-img" :key="index" v-for="(item,index) in directorList">
                  <router-link :to="'/actor/' + item.actorId" tag="a" :title="item.name" target="_blank" active-class="fsize20 #333" exact>
                    <img  class="default-img" :src="fileUploadHost + item.avatar" alt="">
                    <p>{{item.name | ellipsis(10) }}</p>
                  </router-link>
                </div>
                <span  style="color:#ef4238"  v-if="directorList.length === 0">
                  导演信息未录入
                </span>
              </div>
              <div class="starts">
                <p>演员</p>
                <div class="start" :key="index" v-for="(item,index) in actorList">
                  <router-link :to="'/actor/' + item.actorId" tag="a" :title="item.name" target="_blank" active-class="fsize20 #333" exact>
                    <ImagePreview width="128px" height="170px" :alt="item.name" :src="`${item.avatar}`"></ImagePreview>
                    <p>{{item.name | ellipsis(10) }}</p>
                  </router-link>
                </div>
                <span  style="color:#ef4238"  v-if="actorList.length === 0">
                  演员信息未录入
                </span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="图集" name="images">
            <!-- 图集 -->
            <div class="images">
              <div class="intro">
                <div class="intro-text">
                  <span>图集</span>
                  <span>
                            <a href="#">
                                全部>
                            </a>
                        </span>
                </div>
              </div>
              <div class="images-aside"  >
                <!--        剧照        -->
                <ImagePreview width="128px" height="170px" :src="`${movie.stills}`"></ImagePreview>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>


        <!-- 评论 -->
        <div class="comment mt20">
          <el-card class="box-card">
          <div class="intro">
            <div class="intro-text">
              <span>電影短評</span>
            </div>
          </div>
            <Comment :targetId="movieId" :tableName="tableName" :createBy="movie.createBy"></Comment>
          </el-card>
        </div>

      </div>
      <!-- 侧边栏 -->
      <div class="aside">
        <!-- 相关电影 -->
        <div class="other-movie">
          <div class="referral">
            <div class="intro">
              相关电影
            </div>
          </div>
          <div class="other-movie-body">
            <ul>
              <li class="othermovie-model" :key="index" v-for="(item,index) in sameTypeMovieList">
                <a :href="`/movie/` + item.movieId">
                  <div class="movie-poster">
                    <el-image
                      fit="cover"
                      :alt="item.name"
                      :src="fileUploadHost + item.images"
                      :style="`width:128px;height:170px;margin: 0 8px 8px 0;`">
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>
                  </div>
                  <p>{{item.title}}</p>
                </a>
                <i>{{item.rate ? item.rate: `暂无评分`}}</i>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import '@/assets/styles/less/moviedetail.less'
import movieApi from '@/api/media/movie';
import { listTag } from "@/api/media/tag";
import { listCategory } from "@/api/media/category";
import { getDictsByTypeList } from '@/api/system/dict/data';
import { checkCollectFlag, addCollect, cancelCollectByTargetId } from "@/api/website/collect";
import { selectDictLabels } from '@/utils/ruoyi';
export default {
  components: {
  },
  data() {
    return {
      tableName: 'wm_movie',
      movieId: '',
      countryOptions: [],
      statusOptions: [],
      typeOptions: [],
      tagOptions: [],
      movie: {},
      videoList: [],
      actorList: [],
      directorList: [],
      movieImagesList: [],// 剧照
      video: {},
      activeName: 'description',
      sameTypeMovieList: []
    }
  },
  created() {
    this.movieId = this.$route.params && this.$route.params.movieId;
    listTag({status: '1'}).then(response => {
      this.tagOptions =  response.rows;
    });
    this.getDictList();
    this.getDetail();
  },
  methods:{
    getDictList() {
      // 获取字典
      const dictTypeList =  ['movie_country', 'movie_status', 'movie_type'];
      getDictsByTypeList(dictTypeList).then(response => {
        this.countryOptions = response.data.movie_country;
        this.statusOptions= response.data.movie_status
        this.typeOptions= response.data.movie_type
      });
    },
    //查询电影详情信息
    getDetail() {
      movieApi.getMovie(this.movieId).then(response => {
        this.movie = response.data;
        this.videoList = this.movie.videoList;
        this.actorList = this.movie.actorList;
        this.directorList=this.movie.directorList;
        if (this.videoList.length > 0 ) {
          this.video = this.videoList[0]
        }
      });
      movieApi.getSameTypeMovieList(this.movieId).then(response => {
        this.sameTypeMovieList = response.data;
      });
    },
    //播放
    play(videoId){
      if (this.videoList.length === 0){
        this.$modal.msgError("暂时没有播放的视频！请联系管理员进行上传！")
      }else {
        const routeData = this.$router.resolve({
          path: "/video/" + videoId,
          query: {}
        });
        window.open(routeData.href, '_blank');
      }
    },
    //标签翻译
    getTagArray(tagId) {
      if (!tagId) {
        return []
      }
      return tagId.split(',');
    }
  }
};
</script>
<style scoped>
.cc-mask{background:rgba(0,0,0,.4);height:100%;left:0;opacity:0;filter:alpha(opacity=0);position:absolute;right:0;top:0;transition:all .3s ease 0s;width:100%;transition:.3s;-webkit-transition:.3s}
.movies-body ul li:hover .img-responsive{transform:scale(1.1);-webkit-transform:scale(1.1)}
.movies-body ul li:hover .cc-mask{opacity:1;filter:alpha(opacity=100)}

>>> .el-tabs__nav .el-tabs__item {
  font-size: 22px;
  color: #ef4238;
}
>>> .el-tabs__item.is-active {
  color: #ef4238;
}
>>> .el-tabs__active-bar{
  background-color: #ef4238;
}

.default-img {
  background-image: url();
  background-position: 50%;
  background-size: 68px 62px;
  background-repeat: no-repeat;
  width: 128px;
  height: 170px;
}


</style>
